<template>
  <div>
    <div class="bigbox">
      <div>
        <van-icon @click="goback" class="zuo" name="arrow-left" />
      </div>
      <div class="center">
        <van-search v-model="value" placeholder="请输入搜索关键词" />
      </div>
      <div class="you">
        <van-button type="danger" class="right" @click="Setsearch"
          >搜索</van-button
        >
      </div>
    </div>
    <div class="list">
      <h4>
        最近搜索
        <van-icon name="delete-o" />
        <br />
        <van-tag
          plain
          size="large"
          color="gray"
          type="primary"
          v-for="arr in old"
          :key="arr.wordid"
        >{{arr.old}}</van-tag>
      </h4>
    </div>
    <div class="list">
      <h4>热门搜索</h4>
      <br />
      <van-tag
        plain
        size="large"
        color="gray"
        type="primary"
        v-for="index in hotlist"
        :key="index.wordid"
        >{{ index.keyword }}</van-tag
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      typeIcon: "closed-eye",
      hotlist: [],
      old:[]
    };
  },
  methods: {
    goback() {
      this.$router.back();
    },
    Setsearch() {
      if(this.value){
        this.old=this.old.unshift(this.value)
        console.log(this.old);
      }
    },
  },
  created() {
    this.$server({
      url: "pro/hotword",
    }).then((res) => {
      let data = res.data;
      //   console.log(data.data[0].keyword);
      if (data.code == 200) {
        this.hotlist = data.data;
      }
    });
  },
};
</script>

<style scoped>
.bigbox {
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px gray solid;
}
.zuo {
  width: 3.125rem;
  font-size: 1.25rem;
  top: 1rem;
  text-align: center;
}
.center {
  flex: 1;
}
.you {
  width: 3.125rem;
  height: 3.125rem;
  text-align: center;
  line-height: 2.5rem;
}
.right {
  /* background-color: red; */
  width: 2.5rem;
  height: 1.875rem;
}
.list {
  padding: 1.25rem;
}
</style>